<!-- homePage -->
<template>
  <div class="container">
    <Toolbar @clickMenuItemEvent="menuEvent"/>
    <div class="cont-body">
        <div class="item" @click="goHandler('/uiModel')">
            <div class="left">
                <img class="icon" src="../../assets/images/homePage/icon_ui_model.png" alt="">
            </div>
            <div class="right">
                <p class="title">新建 UI Model</p>
                <p class="desc">点击新建一个UI Model</p>
            </div>
        </div>
        <div class="item" @click="goHandler('/a')">
            <div class="left">
                <img class="icon" src="../../assets/images/homePage/icon_ui_form.png" alt="">
            </div>
            <div class="right">
                <p class="title">新建 UI Form</p>
                <p class="desc">点击新建一个UI Form</p>
            </div>
        </div>
        <div class="item" @click="goHandler('/b')">
            <div class="left">
                <img class="icon" src="../../assets/images/homePage/icon_data_dict.png" alt="">
            </div>
            <div class="right">
                <p class="title">新建数据词典</p>
                <p class="desc">点击新建一个新建数据词典</p>
            </div>
        </div>
        <div class="item" @click="goHandler('/c')">
            <div class="left">
                <img class="icon" src="../../assets/images/homePage/icon_refer.png" alt="">
            </div>
            <div class="right">
                <p class="title">新建参照</p>
                <p class="desc">点击新建一个参照</p>
            </div>
        </div>
    </div>
    <CreateSolution v-if="showSolution" :show="showSolution" @cancelEventEmit="cancelEvent" @submitEventEmit="submitEvent"/>
    <CreateModule v-if="showModule" :show="showModule" @cancelEventEmit="cancelEvent" @submitEventEmit="submitEvent"/>
    <CreateModel v-if="showModel" :show="showModel" @cancelEventEmit="cancelEvent" @submitEventEmit="submitEvent"/>
  </div>
</template>

<script setup lang="ts">
import Toolbar from '@/components/ToolBar/index.vue';
import { useRoute, useRouter } from 'vue-router';
import CreateSolution from '@/components/createSolution/index.vue'
import CreateModule from '@/components/createModule/index.vue';
import CreateModel from '@/components/createModel/index.vue';
import { ref } from 'vue';

const router = useRouter()
const route = useRoute()
const showSolution = ref(false)
const showModule = ref(false)
const showModel = ref(false)

function goHandler(path: any) {
    switch(path) {
        case '/uiModel':
            showModel.value = true
    }
}
const submitEvent = function(arg) {
    const { solutionName, moduleName, type } = arg
    showSolution.value = false
    showModule.value = false
    showModel.value = false
    console.log(arg)
    localStorage.setItem('createInfo', JSON.stringify(arg))
    if(type === 'model') {
        // router.push({path: '/uiModel', query: { solutionName, moduleName }})
        router.push({path: '/uiModel'})
    }
}
const cancelEvent = function(flag: boolean) {
    showSolution.value = flag
    showModule.value = flag
    showModel.value = flag
}

const menuEvent = function(menu) {
    const { name } = menu
    console.log(name)
    if (name === '新建方案') {
        showSolution.value = true
    }
    if (name === '新建模块') {
        showModule.value = true
    }
    if (name === '新建Model') {
        showModel.value = true
    }
    if (name === '打开方案') {
        router.push({path: '/uiModel'})
    }
}

</script>
<style lang='scss' scoped>
.container {
    background: #0B0B0E;
    .cont-body {
        padding-top: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .item {
            padding: 20px;
            margin-bottom: 10px;
            width: 80%;
            display: flex;
            flex-direction: row;
            border-radius: 14px;
            background-color: #2A2A2A;
            .left {
                .icon {
                    width: 100px;
                    height: 100px;
                    // background-color: aqua;
                }
            }
            .right {
                margin-left: 50px;
                color: #fff;
                padding: 20px 0;
                .title {
                    font-weight: 700;
                }
            }
        }
    }
}
</style>